<template>
    <div class="container">
        <!-- 管理员信息和头像上传 -->
        <el-row :gutter="20" class="row">
            <el-col :span="4" class="col-center">
                <el-card class="card">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8089/back_system_admin/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="adminInfo.userimg" :src="adminInfo.userimg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-card>
            </el-col>
            <el-col :span="20">
                <el-card class="card">
                    <el-form label-width="80px" size="small">
                        <el-form-item label="管理员Id">
                            <el-input v-model="adminInfo.userid" disabled autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员">
                            <el-input v-model="adminInfo.username" disabled autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="adminInfo.phone" disabled autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!-- 系统统计信息 -->
        <el-row :gutter="20" class="row" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card class="card">
                    <div slot="header" class="clearfix">
                        <span>系统统计信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple-dark">用户数：{{ stats.userCount }}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">订单数：{{ stats.orderCount }}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">今日订单：{{ stats.todayOrders }}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">收入：￥{{ stats.revenue }}</div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <!-- 最近操作记录 -->
        <el-row :gutter="20" class="row" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card class="card">
                    <div slot="header" class="clearfix">
                        <span>最近操作记录</span>
                    </div>
                    <el-table :data="recentActions" style="width: 100%">
                        <el-table-column prop="time" label="时间" width="180"></el-table-column>
                        <el-table-column prop="action" label="操作"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <!-- 图表展示 -->
        <el-row :gutter="20" class="row" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card class="card">
                    <div ref="userChart" class="chart" style="height: 400px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card class="card">
                    <div ref="orderChart" class="chart" style="height: 400px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card class="card">
                    <div ref="revenueChart" class="chart" style="height: 400px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Home",
    data() {
        return {
            adminInfo: '',
            defaultAvatar: 'http://qny.cai142857.cn/2023/09/25/492f03c9c7d249198ab364e406f2a5c6.png',
            stats: {
                userCount: 1024,
                orderCount: 856,
                todayOrders: 34,
                revenue: 123456.78
            },
            recentActions: [],
            chartData: {
                userCounts: [],  // 用户数量数据
                orderCounts: [], // 今日订单数量数据
                revenues: []     // 今日收入数据
            },
            chartXAxis: [] // X 轴数据
        }
    },
    created() {
        this.adminInfo = JSON.parse(localStorage.getItem("user"));
        this.fetchStats();
        this.fetchRecentActions();
    },
    mounted() {
        this.initCharts();
    },
    methods: {
        handleAvatarSuccess(res) {
            if (res.code) {
                this.adminInfo.userimg = res.data;
                this.saveAdminInfo();
            } else {
                this.$message.error('上传失败');
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        fetchStats() {
            this.stats = {
                userCount: 1024,
                orderCount: 856,
                todayOrders: 34,
                revenue: 123456.78
            };
        },
        fetchRecentActions() {
            this.recentActions = [
                { time: '2024-06-12 09:00', action: '登录系统' },
                { time: '2024-06-12 09:15', action: '查看订单详情' },
                { time: '2024-06-12 09:30', action: '更新用户信息' },
                { time: '2024-06-12 10:00', action: '处理退款申请' }
            ];
        },
        saveAdminInfo() {
            localStorage.setItem("user", JSON.stringify(this.adminInfo));
        },
        initCharts() {
            const userChart = echarts.init(this.$refs.userChart);
            const orderChart = echarts.init(this.$refs.orderChart);
            const revenueChart = echarts.init(this.$refs.revenueChart);

            const commonOptions = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.chartXAxis
                },
                yAxis: {
                    type: 'value'
                }
            };

            userChart.setOption({
                ...commonOptions,
                title: { text: '用户数量变化' },
                series: [{ name: '用户数量', type: 'line', data: this.chartData.userCounts }]
            });

            orderChart.setOption({
                ...commonOptions,
                title: { text: '订单数量变化' },
                series: [{ name: '订单数量', type: 'line', data: this.chartData.orderCounts }]
            });

            revenueChart.setOption({
                ...commonOptions,
                title: { text: '利润变化' },
                series: [{ name: '利润', type: 'line', data: this.chartData.revenues }]
            });

            setInterval(() => {
                this.generateMockData();
                userChart.setOption({
                    xAxis: { data: this.chartXAxis },
                    series: [{ name: '用户数量', data: this.chartData.userCounts }]
                });
                orderChart.setOption({
                    xAxis: { data: this.chartXAxis },
                    series: [{ name: '订单数量', data: this.chartData.orderCounts }]
                });
                revenueChart.setOption({
                    xAxis: { data: this.chartXAxis },
                    series: [{ name: '利润', data: this.chartData.revenues }]
                });
            }, 1000);
        },
        generateMockData() {
            if (!this.startDate) {
                this.startDate = new Date(2024, 0, 1); // 2024年1月1日
            } else {
                this.startDate.setDate(this.startDate.getDate() + 1); // 日期增加1天
            }

            const dayStr = `${this.startDate.getFullYear()}-${this.startDate.getMonth() + 1}-${this.startDate.getDate()}`;
            this.chartXAxis.push(dayStr);
            if (this.chartXAxis.length > 10) this.chartXAxis.shift();

            const userCount = Math.floor(Math.random() * 200);
            const orderCount = Math.floor(Math.random() * 300);
            const revenue = Math.random() * 10000;

            this.chartData.userCounts.push(userCount);
            this.chartData.orderCounts.push(orderCount);
            this.chartData.revenues.push(revenue.toFixed(2));

            if (this.chartData.userCounts.length > 10) this.chartData.userCounts.shift();
            if (this.chartData.orderCounts.length > 10) this.chartData.orderCounts.shift();
            if (this.chartData.revenues.length > 10) this.chartData.revenues.shift();
        }

    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.row {
    width: 100%;
}

.card {
    width: 100%;
}

.col-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #8c939d;
    margin-bottom: 1vw;
}

.avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out;
    margin-left: 12px;
    animation: rotate 3s infinite linear;
}

.grid-content {
    text-align: center;
    border-radius: 4px;
    min-height: 50px;
    padding: 10px;
    color: #fff;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.chart {
    height: 400px;
}
</style>
